<template>
  <NavTop />
  <el-container>
    <el-aside width="200px" class="common-left">
    </el-aside>

    <div class="common-layout">



      <div v-if="!list.name" class="container">
        <el-empty :image-size="100" class="font">
          <h2>藏头诗</h2>
          <div v-for="line in poem" :key="line" class="poem-line">
            <h3>&nbsp; {{ line }}</h3>
          </div>
        </el-empty>
      </div>



      <div v-else class="details-container">
        <el-main class="common-main">
          <el-container class="center-container">
            <el-aside width="450px">
              <el-image style="width: 400px; height: 400px" :src="list.img" :zoom-rate="1.2" :max-scale="7"
                :min-scale="0.2" :preview-src-list="list.moreImg" fit="cover" />
            </el-aside>
            <el-container style="height: 60%; ">
              <el-main class="details-main" style="width: 500px; height: 475px;">
                <h2>{{ list.name }}</h2>
                <table class="details-table">
                  <tbody>
                    <tr>
                      <td>详情:</td>
                    </tr>
                    <tr>
                      <td>{{ list.dis }}</td>
                    </tr>
                    <tr>
                      <td style="text-decoration:line-through">
                        原价：{{ list.price }}
                      </td>
                    </tr>
                    <tr>
                      <td>
                        现价：{{ list.onlinePrice }}
                      </td>
                    </tr>
                    <tr>
                      <td></td>
                    </tr>

                    <tr>
                      <td>
                        <label>
                          数量：
                          <el-input-number v-model="num" :min="1" :max="9999999999" @change="handleChange" />
                        </label>
                      </td>
                    </tr>
                    <tr>
                      <td></td>
                    </tr>

                    <tr>
                      <td>
                        <el-button type="primary" plain @click="orderAdd">购买</el-button>
                        <el-button plain @click="cartAdd">加入购物车</el-button>
                      </td>
                    </tr>

                  </tbody>
                </table>
              </el-main>

            </el-container>
          </el-container>
        </el-main>
      </div>

    </div>

    <el-aside width="200px" class="common-right">

    </el-aside>
  </el-container>
</template>

<script>
import NavTop from "@/components/NavTop.vue";
import { useGoodsStore } from "../../store/goods";
import { ElMessageBox } from "element-plus";

export default {
  components: { NavTop },
  data() {
    return {
      list: this.$route.query || {},
      num: 1,
      store: useGoodsStore(),
      poem: [
        "蒋早岁已知世事艰，",
        "奇仍许飞鸿荡云间。",
        "江一路寒风身如絮，",
        "的命海沉浮客独行。",
        "个千磨万击心铸铁，",
        "人殚精竭虑铸一剑。",
        "简今朝剑指叠云处，",
        "介炼蛊炼人还炼天！",
      ],
    };
  },
  methods: {
    cartAdd() {
      ElMessageBox.alert("是否添加到购物车", "提示", {
        confirmButtonText: "确认",
      });
      this.store.cartAdd({
        id: this.list.id,
        name: this.list.name,
        price: this.list.price,
        onlinePrice: this.list.onlinePrice,
        num: this.num,
        total: this.num * this.list.onlinePrice,
      });
    },
    orderAdd() {
      const orderId = `${new Date()
        .toISOString()
        .slice(0, 10)
        .replace(/-/g, "")}${Math.random().toString().slice(2, 10)}`;
      this.store.orderAdd({
        orderId,
        time: new Date(),
        num: this.num,
        sum: this.num * this.list.onlinePrice,
        isOrdered: false,
        child: [
          {
            id: this.list.id,
            name: this.list.name,
            price: this.list.price,
            onlinePrice: this.list.onlinePrice,
            num: this.num,
            total: this.num * this.list.onlinePrice,
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
.common-layout {
  background: url(../../assets/img/background2.png) no-repeat center;
  height: calc(100vh - 70px);
  /* 设置为视窗高度减去 70px */
  width: 100%;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 70px;
  overflow: hidden;

}

.common-left {
  background: url(../../assets/img/Ayanomi.jpg) no-repeat center;
  height: calc(100vh - 70px);
  background-size: cover;
  position: absolute;
  left: 0;
  opacity: 1
}

.common-main {
  background: url(../../assets/img/background2.png) no-repeat center;
}

.common-right {
  background: url(../../assets/img/Asuka.jpg) no-repeat center;
  height: calc(100vh - 70px);
  background-size: cover;
  position: absolute;
  right: 0;
  opacity: 0.3
}

.container {
  text-align: center;
}

.font {
  font-family: "华文行楷";
  font-size: 25px;
}

.details-container {
  width: 65%;
  margin: auto;

}

.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

.details-main {
  text-align: left;
  background-color: rgba(239, 248, 235, 0.6);
  padding: 20px;
}

.details-table {
  margin: 10px 0;
  border-collapse: collapse;
  width: 100%;
}

.details-table td {
  padding: 10px;
  text-align: left;
}

.details-footer {
  text-align: left;
  background-color: rgba(239, 248, 235, 0.6);
  left: 0;
  top: 0;
}




.poem-line {
  margin: 5px 0;
}
</style>